<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="shared/css_js::header">
    <title>门 店</title>
    <link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/weuicss/weui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/muicss/mui.css"/>
    <style>
        body{
            font-family: SimHei,"微软雅黑",sans-serif;
        }
    </style>
</head>

<body>
<nav class="mui-bar mui-bar-tab">
    <div class="mui-bar mui-bar-tab">
        <div class="weui-tabbar" style="text-align: center;height: 50px">
            <div class="weui-tabbar__item" style="color: white;border-right: 1px #B2B2B2;background-color: black;flex-grow: 2">
                <div class="weui-cell" style="padding: 0;position: relative">
                    <h4 style="position: absolute;left: 25%;top:10%;margin-top:10px">合计:¥<span id="totalprice">0</span></h4>
                </div>
                <p class="weui-tabbar__label" style="position: absolute;bottom: 0;left: 25%;">(不含安装费)</p>
            </div>
            <!--<div style="width: 80px">-->
                <!--<div class="weui-tabbar__icon"  style="margin-top: 5px">-->
                    <!--<img th:src="@{/img/my/order/wait_pj.png}"/>-->
                <!--</div>-->
                <!--<p class="weui-tabbar__label" style="padding-top: 5px">客服</p>-->
            <!--</div>-->
            <a id="orderbtn" data-target="#half" class="weui-tabbar__item" style="background-color: #CE3C39;;flex-grow: 1">
                <h4 style="color: white;padding-top: 6%">去预约</h4>
            </a>
        </div>
    </div>
</nav>
<header class="mui-bar mui-bar-nav">
    <a id="back" class=" mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">门店</h1>
</header>
<div class="mui-content">
    <div class="weui-flex">
        <!--<div class="weui-flex__item" style="flex-grow: 2;position: relative">-->
        <!--<a href="#" style="color: black;position: absolute;top:10%;text-align: center;left:20%">-->
        <!--<p>广州<span class="mui-icon mui-icon-arrowdown"></span></p>-->
        <!--</a>-->
        <!--</div>-->
        <div class="weui-flex__item" style="flex-grow: 1;text-align: center;position: relative">
            <span onclick="checklocation()" class="fa fa-map-marker" style="position: absolute;top:20%;"></span>
        </div>
        <div class="weui-flex__item" style="margin-left: 10px;flex-grow:6;position: relative;height: 35px">
            <div class="weui-search-bar" id="searchBar" style="padding: 0;height: 30px">
                <form class="weui-search-bar__form">
                    <div class="weui-search-bar__box">
                        <i class="weui-icon-search"></i>
                        <input type="search" class="weui-search-bar__input" id="searchInput" required="">
                        <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                    </div>
                </form>

            </div>
        </div>
        <div class="weui-flex__item" style="flex-grow: 1;text-align: center;position: relative">
            <a onclick="shopsearch()"><p style="margin-top: 5px;margin-left: 5px">搜索</p></a>
            <!--<span onclick="checkmap()" class="fa fa-location-arrow" style="position: absolute;top:20%;right:30%"></span>-->
        </div>
    </div>
    <div class="weui-flex" style="border-bottom:1px solid #c8c7cc;background-color: white">
        <div class="weui-flex__item" style="border-right:1px solid #c8c7cc;">
            <div class="weui-cell" id="aaa" href="javascript:;" style="padding: 0 5px">
                <!--addcode为地址编码,ar为地址字符串-->
                <input type="text" th:attr="data-code=${area}" th:value="${ar}" id='area' style="border: none;margin:0;padding:0;font-size: 14px;width: 140px" readonly="readonly" />
            </div>
        </div>
        <div class="weui-flex__item" style="border-right:1px solid #c8c7cc">
            <div class="weui-cell" id="bbb" href="javascript:;" style="padding: 0 5px;width: 100%;">
                <input th:if="${setshoptype==null}" id="shoptype" type="text" value="全部门店" style="border: none;width:60px;margin:0;padding:0;font-size: 14px" readonly="readonly"/>
                <!--<input th:if="${setshoptype!=null}" id="shoptype" type="text" th:attr="data-values=${shoptype}" th:value="${setshoptype}" style="border: none;width:60px;margin:0;padding:0;font-size: 14px" readonly="readonly"/>-->
                <span class="mui-icon mui-icon-arrowdown" ></span>
            </div>
        </div>
        <div class="weui-flex__item">
            <div class="weui-cell" id="ccc" href="javascript:;" style="padding: 0 5px;width: 100%;">
                <input th:if="${settype==null}" id="type" type="text" value="默认排序" style="border: none;width:60px;margin:0;padding:0;font-size: 14px" readonly="readonly"/>
                <input th:if="${settype!=null}" id="type" type="text" th:attr="data-values=${type}" th:value="${settype}" style="border: none;width:60px;margin:0;padding:0;font-size: 14px" readonly="readonly"/>
                <span class="mui-icon mui-icon-arrowdown" ></span>
            </div>
        </div>
    </div>
    <ul class="mui-table-view mui-table-view-chevron total">
        <li class="mui-table-view-cell mui-collapse">
            <a class="item" href="#">
                <p>已选<span id="itemsel" th:text="${itemsel}"></span>个服务项目</p>
                <input id="itemnum" type="hidden" th:value="${itemnum}" />
            </a>
            <div th:each="glist:${glist}">
                <ul class="mui-table-view mui-table-view-chevron">
                    <li class="mui-table-view-cell" style="padding: 5px 31px;border-top:1px solid #999;">
                        <p th:text="${glist.packname}" class="packname" th:data="${glist.packid}"></p>
                    </li>
                    <li th:each="itemlist:${itemlist}" th:if="${itemlist.packid==glist.packid}" class="mui-table-view-cell" style="padding-right: 0">
                        <!--<img th:src="@{/img/by/jiyou.png}" />-->
                        <div class="shop">
                            <div class="weui-flex">
                                <div class="weui-flex__item" style="flex-grow: 9">
                                    <p th:text="${itemlist.servitemname}" class="itemname" th:data="${itemlist.servitemid}"></p>
                                    <!--<p>全合成</p>-->
                                    <p style="color: black">¥<span class="price">价格详情选中门店以后确定</span></p>
                                </div>
                                <div class="weui-flex__item" style="flex-grow: 1;position: relative">
                                    <div class="weui-count" style="bottom: 0;position: absolute">
                                        <span>x</span><span class="num"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
    </ul>

    <div class="weui-flex" th:if="${#lists.isEmpty(shoplist)}">
        <p style="margin-left: 120px"><span>暂无门店,请重新选择</span></p>
    </div>

    <div class="weui-cells__title"></div>
    <ul class="mui-table-view mui-table-view-chevron" th:if="${#lists.size(shoplist)>0}">
        <li class="mui-table-view-cell mui-collapse shoplist mui-active">
            <a class="weui-cell weui-cell_access" style="padding: 10px 15px">
                <div class="weui-cell__bd">
                    <p>预约门店<span style="float: right;margin: 0 5px" id="shopname"></span></p>
                </div>
            </a>
            <div>
                <ul class="mui-table-view mui-table-view-chevron">
                    <li th:each="shoplist:${shoplist}" class="mui-table-view-cell mui-media" style="padding: 10px 15px;white-space: nowrap">
                        <div class="weui-flex shopsel">
                            <div class="mui-input-row mui-radio mui-left weui-flex__item" style="flex-grow: 1">
                                <input name="radio1" th:value="${shoplist.chnid}" class="shopid" type="radio" style="left:5%;top:20%"/>
                                <input th:value="${shoplist.tel}" class="shoptel" type="hidden" />
                            </div>
                            <div class="weui-flex__item" style="flex-grow: 7;max-width: 80%">
                                <img class="mui-media-object mui-pull-left" th:src="@{'/common/image?filename='+${shoplist.picurl}}" style="max-width:70px;height: 70px "/>
                                <div class="mui-media-body">
                                    <p class="shopname" style="color: black" th:text="${shoplist.chnname}">
                                    </p>
                                    <p >评价 <span class='com' style="color: black" th:text="${shoplist.com==null?'暂无':#numbers.formatDecimal(shoplist.com, 0, 2)}"></span> | <span style="color: black" th:text="${shoplist.num}" ></span>单</p>
                                    <p>
                                        <span style="white-space: nowrap" th:text="${shoplist.addr}"></span>
                                    </p>
                                </div>
                            </div>
                            <div class="weui-flex__item" style="flex-grow: 1;position: relative">
                                <p th:if="${shoplist.distance!=null}" class="mui-pull-right" style="color: black;position: absolute;bottom: 27px;right: 0" th:text="${shoplist.distance/10+'KM'}"></p>
                                <p><a th:href="@{/shopdetail(flag=1,chnid=${shoplist.chnid})}" class="mui-pull-right" style="color: #CE3C39;position: absolute;bottom: 5px;right: 0">详情</a></p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
    </ul>

    <div class="weui-cells__title"></div>
    <ul class="mui-table-view mui-table-view-chevron " th:if="${#lists.size(shoplist)>0}">
        <li class="mui-table-view-cell mui-collapse" id="servlist">
            <a class="weui-cell weui-cell_access"  style="padding: 10px 15px">
                <div class="weui-cell__bd">
                    <p>服务顾问<span style="float: right;margin: 0 5px" id="gname"></span></p>
                </div>
            </a>
            <div id="servadd">
                <!--<ul class="mui-table-view mui-table-view-chevron">-->
                    <!--<li class="mui-table-view-cell mui-media" style="padding: 10px 15px">-->
                        <!--<div class="weui-flex" style="height: 30px">-->
                            <!--<div class="mui-input-row mui-radio mui-left weui-flex__item">-->
                                <!--<input name="radio2" type="radio" style="left:2%;top:-1px;"/>-->
                            <!--</div>-->
                            <!--<div class="weui-flex__item">-->
                               <!--<h5 class="gname" style="float: right;color: black">无顾问</h5>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</li>-->
                    <!--<li class="mui-table-view-cell mui-media" style="padding: 10px 15px">-->
                        <!--<div class="weui-flex">-->
                            <!--<div class="mui-input-row mui-radio mui-left weui-flex__item" style="flex-grow: 1">-->
                                <!--<input name="radio2" value="1" type="radio" style="left:5%;top:20%"/>-->
                            <!--</div>-->
                            <!--<div class="weui-flex__item" style="flex-grow: 7">-->
                                <!--<img class="mui-media-object mui-pull-left" src="img/mendian/1.jpg"/>-->
                                <!--<div class="mui-media-body">-->
                                    <!--<p class="gname" data-shopid="1" style="color: black">-->
                                        <!--陈先生-->
                                    <!--</p>-->
                                    <!--<p class='pj' style="color: black">评价-->
                                        <!--<span>4.92</span> | <span >12单</span>-->
                                        <!--<a href="/shopdetail" class="mui-pull-right" style="color: #CE3C39">详情</a>-->
                                    <!--</p>-->
                                <!--</div>-->
                            <!--</div>-->
                        <!--</div>-->
                    <!--</li>-->
                <!--</ul>-->
            </div>
        </li>
    </ul>
</div>

<!--预约时间-->
<div id="half" class="weui-popup__container popup-bottom">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">
        <div class="weui-cells weui-cells_form">
            <header style="padding: 20px 0;background-color: #f7f7f7"><h4 style="text-align: center">请选择</h4></header>
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">预约日期</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" data-toggle="date" type="text" readonly="readonly" style="margin-bottom: 0" id="datepicker"/>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <label class="weui-label">预约时间</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input" placeholder="请先选择预约日期" type="text" readonly="readonly" style="margin-bottom: 0" id="timesel" disabled="disabled"/>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd">
                    <a href="javascript:;"  class="weui-btn weui-btn_default close-popup" style="width: 100px;float: right">返 回</a>
                </div>
                <div class="weui-cell__bd">
                    <a href="javascript:;" id="submit" class="weui-btn weui-btn_default" style="width: 100px;float: right">提交预约</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="map" class="weui-popup__container">
    <div class="weui-popup__overlay"></div>
    <div class="weui-popup__modal">

        <header class="mui-bar mui-bar-nav">
            <a class="mui-icon mui-icon-left-nav mui-pull-left close-popup"></a>
            <h1 class="mui-title">当前位置</h1>
        </header>
        <div class="mui-content">
            <div id="container" style="width:500px; height:550px"></div>
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/city-picker.min.js"></script>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.3&key=e001d49f941c6992e70edd5322efbcb6&plugin=AMap.Geocoder"></script>

<!--所选项目数据-->
<input th:value="${data}" type="hidden" id="data"/>
<input th:value="${itemnum}" type="hidden" id="pitemnum"/>
<input th:value="${itemsel}" type="hidden" id="pitemsel"/>
<input th:value="${busiid}" type="hidden" id="busiid"/>

<input id="lat" type="hidden" th:value="${lat}"/>
<input id="lon" type="hidden" th:value="${lon}"/>

<script th:inline="javascript">
    /*<![CDATA[*/

    $("#orderbtn").click(function () {
        var shopname=$("#shopname").text();
        if(shopname==''){
            $.alert('请先选择预约门店!')
        } else {
            $.openPopup("#half");
        }
    });

    $("#timesel").select({
        title: "请选择预约时间",
        items: [{
                title: ""
            }],
        onOpen:function () {
        },
        beforeClose:function () {
        }
    });

    function loadtime() {
        $.showLoading("加载预约时间中...");
        mui.ajax('/shopdetailbooktime', {
            data: {
                chnid: $('input:radio[name="radio1"]:checked').val(),
                bookdate: $("#datepicker").val()
            },
            dataType: 'json',//服务器返回json格式数据
            type: 'get',//HTTP请求类型
            success: function (json) {
                var data=json.result;
                var d = data[0].toString();
                var time = d.split(',');
                $("#timesel").select("update", { items:time });
                var d1 = data[1].toString();
                d1=d1.replace("[","");
                d1=d1.replace("]","");
                d1=d1.replace(" ","");
                var reptime = d1.split(',');
                $("#timesel").select("update", { onOpen:function () {
                    for (var i = 0; i < reptime.length; i++) {
                        $(".weui-check_label").each(function () {
                            var text = $(this).find("p").text();
                            if (reptime[i] == text && text != "") {
                                $(this).find("p").css('color', '#CE3C39');
                                $(this).find("p").addClass("warn");
                                return false;
                            }
                        })
                    }
                } });
                $("#timesel").select("update", { beforeClose:function () {
                    var c=$('input:radio[name="weui-select"]:checked').closest('.weui-check_label').find("p").attr('class');
                    if(c=='warn'){
                        $.toast("该时间段工位数已满","forbidden");
                        return false;
                    }
                    return true;
                } });
                $.hideLoading();
            }
        })
    }

//    $("#timesel").click(function () {
//        var flag1 = 0;
//        var flag2 = 0;
//        var time = $("#datepicker").val();
//        if (time == '') {
//            $.alert('请先选择预约日期!');
//            $("#timesel").select("close");
//        } else {
//            flag1 = 1;
//        }
//        var shopname = $("#shopname").text();
//        if (shopname == '') {
//            $.alert('请先选择预约门店!');
//            $("#timesel").select("close");
//        } else {
//            flag2 = 1;
//        }
//        if (flag1 && flag2) {
//
//        }
//    });

    mui.getJSON('/shopdetailtime',function(data){
        var d=data.toString();
        var time=d.split(',');
        $("#datepicker").calendar({
            dateFormat:"yyyy-mm-dd",
            minDate:time[0],
            maxDate:time[1],
            onClose:function () {
                var s=$("#shopname").text();
                if(s!=''){
                    $("#timesel").removeAttr('disabled');
                    $("#timesel").removeAttr('placeholder');
                    loadtime()
                }
            },
            onOpen:function () {
                $("#timesel").val("");
            }
        });
    });

    //加载项目数量
    function countnum() {
        var item=$("#itemnum").val();
        var inum=item.split("");
        var i=0;
        $(".num").each(function () {
            $(this).text(inum[i]);
            i++
        })
    }
    $(document).ready(function () {
        $.showLoading("加载中...");
        countnum();
//        $(".com").each(function () {
//            var com=$(this).text();
//            if(com==''||com==null){
//                com='暂无';
//            } else {
//                var num=new Number(com);
//                com=num.toFixed(2);
//            };
//            $(this).text(com)
//        });
        var storage=window.localStorage;
        var flag=storage.getItem("flag");

        if(flag==1){
            $(".shoplist").addClass("mui-active");
            loadserv();
            loadprice();
            var shopname=storage.getItem("shopname");
            if(shopname!=null)
                $("#shopname").text("已选:"+shopname);

            var flag2=storage.getItem("flag2");
            if(flag2==1){
                $("#servlist").addClass("mui-active");
                var serv=storage.getItem("serv");
                if(serv!=null)
                    $("#gname").text("已选:"+serv);
            }
        }
        $.hideLoading();
    });

    window.onload=function () {
        var lat=$("#lat").val();
        if(lat==""){
            checklocation()
        }
    };

    $("#area").cityPicker({
        title: "请选择",
        onClose:function () {
            var storage=window.localStorage;
            storage.clear();
            var area=$("#area").data('code');
//            var shoptype=$("#shoptype").data('values');
            var type=$("#type").data('values');
            var ar=$("#area").val();
            var data=$("#data").val();
            var itemnum=$("#pitemnum").val();
            var itemsel=$("#pitemsel").val();
            var busiid=$("#busiid").val();
            location.href="/shoplist?type="+type+"&area="+area+"&ar="+ar+"&data="+data+"&itemnum="+itemnum+"&itemsel="+itemsel+"&busiid="+busiid
        }
    });

    $("#shoptype").select({
        title: "选择门店类型",
        items: [
            {
                title: "全部门店",
                value: "2"
            }
        ],
        onClose:function () {
//            var area=$("#area").data('values');
//            var shoptype=$("#shoptype").data('values');
//            var type=$("#type").data('values');
//            var ar=$("#area").val();
//            var data=$("#data").val();
//            var itemnum=$("#pitemnum").val();
//            var itemsel=$("#pitemsel").val();
//            location.href="/shoplist?shoptype="+shoptype+"&type="+type+"&area="+area+"&ar="+ar+"&data="+data+"&itemnum="+itemnum+"&itemsel="+itemsel
        }
    });
    $("#bbb").click(function () {
        $("#shoptype").select("open");
    });
    $("#type").select({
        title: "选择类型",
        items: [
            {
                title: "默认排序",
                value: "1"
            },
            {
                title: "附近优先",
                value: "2"
            },
            {
                title: "评分最高",
                value: "3"
            },
            {
                title: "服务次数",
                value: "4"
            }
        ],
        onClose:function () {
            var storage=window.localStorage;
            storage.clear();
            var area=$("#area").data('code');
//            var shoptype=$("#shoptype").data('values');
            var type=$("#type").data('values');
            var ar=$("#area").val();
            var data=$("#data").val();
            var itemnum=$("#pitemnum").val();
            var itemsel=$("#pitemsel").val();
            var busiid=$("#busiid").val();
            location.href="/shoplist?type="+type+"&area="+area+"&ar="+ar+"&data="+data+"&itemnum="+itemnum+"&itemsel="+itemsel+"&busiid="+busiid
//            location.href="/shoplist?type="+type+"&data="+data+"&itemnum="+itemnum+"&itemsel="+itemsel
        }
    });
    $("#ccc").click(function () {
        $("#type").select("open");
    });

    function shopsearch() {
        var storage=window.localStorage;
        storage.clear();
        var search=$("#searchInput").val();
        var area=$("#area").data('code');
//            var shoptype=$("#shoptype").data('values');
        var type=$("#type").data('values');
        var ar=$("#area").val();
        var data=$("#data").val();
        var itemnum=$("#pitemnum").val();
        var itemsel=$("#pitemsel").val();
        var busiid=$("#busiid").val();
        location.href="/shoplist?type="+type+"&area="+area+"&ar="+ar+"&data="+data+"&itemnum="+itemnum+"&itemsel="+itemsel+"&search="+search+"&busiid="+busiid
    }

    //加载服务顾问
    function loadserv() {
        var shopid=$('input:radio[name="radio1"]:checked').val();
        mui.getJSON('/shopserv', {shopid: shopid}, function (json) {
            var data=json.result;
            var length=data.length;
            var hh='';
            hh+='<ul class="mui-table-view mui-table-view-chevron">' +
                '                   <li class="mui-table-view-cell mui-media " style="padding: 10px 15px">' +
                '                        <div class="weui-flex sss" onclick="servsel(this)" style="height: 30px">' +
                '                            <div class="mui-input-row mui-radio mui-left weui-flex__item">' +
                '                                <input class="servrad" name="radio2"  value="0" type="radio" style="left:2%;top:-1px;"/>' +
                '                            </div>' +
                '                            <div class="weui-flex__item">' +
                '                               <h5 class="gname" style="float: right;color: black">无顾问</h5>' +
                '                            </div>' +
                '                        </div>' +
                '                    </li>';
            for(var i=length-1;i>=0;i--){
                var com=data[i].com;
                if(com==null){
                    com='暂无';
                } else {
                    var num=new Number(com);
                    com=num.toFixed(2);
                };
                hh+='<li class="mui-table-view-cell mui-media " style="padding: 10px 15px">' +
                    '                        <div class="weui-flex sss" onclick="servsel(this)">' +
                    '                            <div class="mui-input-row mui-radio mui-left weui-flex__item" style="flex-grow: 1">' +
                    '                                <input class="servrad" name="radio2" value="'+data[i].staffid+'" type="radio" style="left:5%;top:20%"/>' +
                    '                            </div>' +
                    '                            <div class="weui-flex__item" style="flex-grow: 7">' +
                    '                                <img class="mui-media-object mui-pull-left" src="img/mendian/1.jpg"/>' +
                    '                                <div class="mui-media-body">' +
                    '                                    <p class="gname" style="color: black">' +
                    data[i].staffname+
                    '                                    </p>' +
                    '                                    <p style="color: black">评价' +
                    '                                        <span>'+com+'</span> | <span >'+data[i].num+'单</span>' +
                    '                                        <a href="/shopdetailserv?chnid='+shopid+'&servid='+data[i].staffid+'" class="mui-pull-right" style="color: #CE3C39">详情</a>' +
                    '                                    </p>' +
                    '                                </div>' +
                    '                            </div>' +
                    '                        </div>' +
                    '                    </li>'
            }
            hh+='</ul>';
            $("#servadd").html(hh);
            $("#timesel").val("");
            $("#datepicker").val("");
            $("#timesel").attr('disabled','disabled');
            var storage=window.localStorage;
            var serv=storage.getItem("serv");
            if(serv!=null){
                $(".sss").each(function () {
                    var text=$(this).find(".gname").text();
                    if(text==serv){
                        $(this).find(".servrad").prop('checked', 'checked');
                        return false;
                    }
                })
            }
        });
    }

    //加载项目价格
    function loadprice() {
        var shopid=$('input:radio[name="radio1"]:checked').val();
        var item = new Array();
        $(".itemname").each(function () {
            $(this).parent().find(".price").text(0);
            var v = $(this).attr('data');
            item.push(v);
        });
        var data={
            item:item,
            shopid:shopid
        };
        mui.ajax('/shopprice',{
            data:{
                data:JSON.stringify(data)
            },
            dataType:'json',//服务器返回json格式数据
            type:'get',//HTTP请求类型
            success:function(json){
                var data=json.result;
                var length=data.length;
                for(var i=0;i<length;i++){
                    $(".itemname").each(function () {
                        var d=$(this).attr('data');
                        var d1=data[i].servitemid;
                        if(d==d1){
                            $(this).parent().find(".price").text(data[i].whprice);
                        }
                    })
                }
                $("#totalprice").text(0);
                countprice()
            },
            error:function(data){
                $.alert('加载数据失败,请重试!')
            }
        })
    }

    //门店选中事件
    $(".shopsel").click(function () {
        $.showLoading("加载中...");
        $(".shopid").each(function () {
            $(this).removeProp('checked');
        });
        $(this).find(".shopid").prop('checked', 'checked');
        var shopname=$(this).find(".shopname").text();
        $("#shopname").text("已选:"+shopname);
        var storage=window.localStorage;
        storage.setItem("shopname",shopname);
        storage.setItem("flag",1);
        $("#gname").text("");
        //加载服务顾问
        loadserv();

        //加载项目价格
        loadprice();
        $.hideLoading();
    });

    //选顾问前判断是否选择了门店
    mui('#servlist').on('tap', 'a', function(e) {
        var shopname=$("#shopname").text();
        if(shopname==''){
            $.alert('请先选择预约门店');
            $("#servlist").removeClass('mui-active');
        }
    });

    //服务顾问选择事件
   function servsel($this) {
       $(".servrad").each(function () {
            $(this).removeProp('checked');
       });
       $($this).find(".servrad").prop('checked', 'checked');
       var gname=$($this).find(".gname").text();
       $("#gname").text('已选:'+gname);
       var storage=window.localStorage;
       storage.setItem("serv",gname);
       storage.setItem("flag2",1);
   }

    function countprice() {
        var sum=0;
        $(".price").each(function () {
            var a=$(this).text();
            var num=$(this).closest('.weui-flex').find('.num').text();
            var price =parseInt(a*num);
            sum+=parseInt(price);
        });
        $("#totalprice").text(sum);
    }

    //去预约
    $("#submit").click(function () {
        var flag1=0;
        var flag2=0;
        var time=$("#timesel").val();
        if(time==''){
            $.alert('请先选择预约时间!')
        } else {
            flag2=1;
        }
        var date=$("#datepicker").val();
        if(date==''){
            $.alert('请先选择预约日期!')
        } else {
            flag1=1;
        }

        if((flag1==1)&&(flag2==1)) {
            $.showLoading("正在预约...");
            var shop = new Array();
            $(".packname").each(function () {
                var v = $(this).attr('data');
                $(this).parent().parent().find(".shop").each(function () {
                    var pack =  v;
                    shop.push(pack);
                    var item =  $(this).find(".itemname").attr('data');
                    var num =$(this).find(".num").text();
                    shop.push(item);
                    shop.push(num);
                })
            });
            var busiid=$("#busiid").val();
            var shoptel=$('input:radio[name="radio1"]:checked').parent().find(".shoptel").val();
            var chnname=$('input:radio[name="radio1"]:checked').parent().parent().find(".shopname").text();
            var data = {
                shoplist: shop,
                shoptel: shoptel,
                chnname: chnname,
                time: time,
                date: date,
                shopid:$('input:radio[name="radio1"]:checked').val(),
                servid:$('input:radio[name="radio2"]:checked').val(),
                busiid:busiid
            };
            mui.ajax('/shoporder',{
                data:{
                    shop:JSON.stringify(data)
                },
                dataType:'json',//服务器返回json格式数据
                type:'post',//HTTP请求类型
                success:function(data){
                    $.hideLoading();
                    $.alert('预约成功!');
                    var storage=window.localStorage;
                    storage.clear();
                    location.href="/person/personhome";
                },
                error:function(data){
                    $.hideLoading();
                    $.alert('预约失败,请重试!')
                }
            })
        }
    });

    mui('#servadd').on('tap','a',function(){
        window.location.href = this.href;
    });

    $("#back").click(function () {
        var storage=window.localStorage;
        storage.clear();
        var busiid=$("#busiid").val();
        location.href="/item/item?busiid="+busiid;
    });

//    function checkmap() {
//        $.openPopup("#map");
//        var lat= $("#lat").val();
//        var lon= $("#lon").val();
//        var map = new AMap.Map('container', {
//            resizeEnable: true,
//            zoom:15,
//            center: [lon, lat]
//        });
//        marker = new AMap.Marker({
//            position: [lon, lat],
//            title: '当前位置',
//            map: map
//        });
//    }

    function checklocation() {
        $.showLoading("正在定位中...");
        var map, geolocation;
        //加载地图，调用浏览器定位服务
        map = new AMap.Map('container', {
            resizeEnable: true
        });
        map.plugin('AMap.Geolocation', function() {
            geolocation = new AMap.Geolocation({
                enableHighAccuracy: true,//是否使用高精度定位，默认:true
                timeout: 3500,          //超过10秒后停止定位，默认：无穷大
            });
            map.addControl(geolocation);
            geolocation.getCurrentPosition();
            AMap.event.addListener(geolocation , 'complete',onComplete); //定位成功后的回调函数
            AMap.event.addListener(geolocation, 'error', onError);
        });
        function onComplete(data) {
            var lon=data.position.getLng();
            var lat=data.position.getLat();
            var address=data.addressComponent.district==""?data.addressComponent.province+" "+data.addressComponent.city+" "+data.addressComponent.city:data.addressComponent.province+" "+data.addressComponent.city+" "+data.addressComponent.district;
            var adcode=data.addressComponent.adcode;
            var olat= $("#lat").val();
            var olon= $("#lon").val();
            if(olat!=lat||olon!=lon){
                mui.ajax('/savelocation',{
                    data:{
                        lat:lat,
                        lon:lon,
                        address:address,
                        adcode:adcode
                    },
                    dataType:'json',//服务器返回json格式数据
                    type:'get',//HTTP请求类型
                    success:function(json) {
                    }
                })
            }
            var storage=window.localStorage;
            storage.clear();
//            var shoptype=$("#shoptype").data('values');
            var type=$("#type").data('values');
            var itemnum=$("#pitemnum").val();
            var itemsel=$("#pitemsel").val();
            var busiid=$("#busiid").val();
            var itemdata=$("#data").val();
            $.hideLoading();
            location.href="/shoplist?type="+type+"&area="+adcode+"&ar="+address+"&data="+itemdata+"&itemnum="+itemnum+"&itemsel="+itemsel+"&busiid="+busiid
        }
        //解析定位错误信息
        function onError(data) {
            $.hideLoading();
//            switch(data.info) {
//                case 'PERMISSION_DENIED':
//                    alert('浏览器阻止了定位操作');
//                    break;
//                case 'POSITION_UNAVAILBLE':
//                    alert('无法获得当前位置');
//                    break;
//                case 'TIMEOUT':
//                    alert('定位超时');
//                    break;
//                default:
//                    alert('定位失败 请开启定位服务后重试');
//                    break;
//            }
        }
    }

    /*]]>*/
</script>



</body>

</html>